<template>
  <el-container style="min-height: 100vh" id="login">
    <el-container>
        <el-header style=" border-bottom: 1px solid #ccc;top: 0;"  >
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" />
        </el-header>
      <el-main style="padding: 0">
        <!-- 表示当前页面的子路由会在 <router-view /> 里面展示-->
        <router-view />

      </el-main>

    </el-container>
  </el-container>
</template>

<script>



import Aside from "@/components/front/Aside";
import Header from "@/components/front/Header";
export default {
  name: 'Home',
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      isShow: true,
      logoTextShow: true,
    }
  },
  components: {
    Aside,
    Header
  },
  methods: {
    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {   // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    isScroll() {
      const top = document.documentElement.scrollTop
      if (top > 1) {	// 滚动条滚动距离超过100时
        this.isShow = false
      } else {
        this.isShow = true
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.isScroll)
  },
  unmounted () {
    window.removeEventListener('scroll', this.isScroll)
  }
}
</script>
<style>

</style>